<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sql工具 - url2sql</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css">
<!-- Le styles -->
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
.tools{
  display: none;
  height: 15px;
}
.tools i:hover {
  background-color: rgba(255, 0, 0, .25);
}
.page-header h1 .tools{
  float: right;
}
</style>
<link rel="stylesheet" href="./css/bootstrap-responsive.min.css"
  type="text/css">
  
<script type="text/javascript" src="./js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="./js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>

<body>
<script include='header.html'></script>

  <div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
	        <div class="well sidebar-nav">
	            <ul class="nav nav-list" id="allTable">
	              <li class="nav-header">所有表</li>
	            </ul>
	          </div>
        </div>
        <div class="span10">
        	<textarea class="span10" style="height: 100px;width: 100%;" id="sql">SELECT * from __url2sqltable</textarea>
        	<div><span id="msg" class="badge"></span><button class="btn" style="float: right;" id="exe">执行</button>&nbsp;</div>
        	<hr/>
        	<div id="result"></div>
        </div>
    </div>

    <hr>
    <footer>
      <p>Say:后端是前端的Mysql.</p>
    </footer>
    	
	<script type="text/tmpl" id="url2sql-tmpl">

	   <tr>
	    <td>${path}</td>
	  </tr>
	</script>
  </div>
  <script type="text/javascript">
  	function callback(json){
	  	var allTable = $('#allTable');
  		for(var i in json.data){
  			var li = $('<li></li>');
  			$('<a></a>').html(json.data[i]).appendTo(li);
  			li.appendTo(allTable);
  		}
  	}
  	$(function(){
  		$('#exe').click(function(){
  			var sql=$('#sql').val().trim();
  			var error = function(msg, dom){
  				$('#msg').html(msg).attr('class', 'badge badge-error');
  				$('#result').html(dom);
  			};
  			var success = function(data){
  				$('#msg').html('结果:').attr('class', 'badge badge-success');
  				if((typeof data) != 'object'){
  					$('#result').html('影响行数：' + data);
  					return;
  				}
  				var table = $('<table></table>').attr('class', 'table table-bordered table-striped');
  				var keys = [];
  				for(var k in data[0]){
  					keys.push(k);
  				}
  				$('<tr><th>' + keys.join('</th><th>') + '</th></tr>').appendTo(table);
  				for(var i in data){
  					var temp = [];
  					for(var k in keys){
  						temp.push(data[i][keys[k]]);
  					}
  					$('<tr><td>' + temp.join('</td><td>') + '</td></tr>').appendTo(table);
  				}
  				$('#result').empty().append(table);
  			}
  			if(!sql){
  				error('Sql无效');
  				return ;
  			}
  			var url = "tools/executeSql.json";
  			$.ajax({
					'async' : false,
					'type' : "post",
					'url' : url,
					'data' : {'sql' : sql},
					'dataType' : 'json',
					'success' : function(json){
						if(json.code!=0){
							error('执行出错', json.msg);
							return;
						}
						success(json.data);
					}
				});
  		});
  	});
  </script>
</body>
</html>
